<template>
  <view>
    <view class="bg">
      <!-- 用户信息 -->
      <view>
        <view style="text-align: center; margin-top: 20rpx; color: white"
          >会员中心</view
        >
        <view style="display: flex; text-align: center; height: 100rpx">
          <!--头像 -->
          <view class="tx"> </view>
          <!-- 昵称 -->
          <view style="line-height: 180rpx; color: white">yq_6109_917</view>
        </view>
      </view>
      <!-- 余额 -->
      <view style="height: 100rpx"></view>
      <view class="yuer">
        <view style="font-size: 45rpx">0:00</view>
        <view style="font-size: 25rpx; font-weight: 100">我的余额</view>
      </view>

      <!-- //会员中心 -->
      <view
        style="
          display: flex;
          justify-content: space-between;
          height: 100rpx;
          margin: 20rpx;
          border-radius: 10rpx;
          background-color: #5f6571;
          text-align: center;
          line-height: 100rpx;
          color: white;
        "
        @click="vip"
      >
        <image
          src="../../static/imgs/vip01.png"
          style="height: 60rpx; width: 60rpx; margin: 20rpx"
        ></image>
        <view>开通会员下单即可享用折扣优惠</view>
        <image
          src="/static/imgs/jt1.png"
          style="height: 50rpx; width: 50rpx; margin: 20rpx"
        ></image>
      </view>

      <!-- //邀请好友 -->
      <view class="yqhy">
        <view style="color: white; line-height: 150rpx; margin-left: 30rpx">
          邀请好友获取
          <text style="font-size: 50rpx; font-weight: bold">50</text> 元现金
        </view>
        <!-- //立即邀请 -->
        <view class="yqhybtn" @click="yqhy"> 立即邀请 </view>
      </view>

      <!-- //我的订单 -->

      <view class="orderBox">
        <view
          style="display: flex; justify-content: space-between; margin: 20rpx"
        >
          <view style="flex: 4">我的订单</view>
          <view style="font-size: 28rpx; color: gray"> 全部订单 </view>

          <image
            src="/static/imgs/jt2.png"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </view>
        <!-- 详细订单 -->
        <view style="display: flex; justify-content: space-between">
          <view class="orderminiBox" @click="orderInfo">
            <image src="/static/imgs/dfk.png" class="orderImg"></image>
            <view>待付款</view>
          </view>
          <view class="orderminiBox">
            <image src="/static/imgs/dwc.png" class="orderImg"></image>
            <view>待完成</view>
          </view>
          <view class="orderminiBox">
            <image src="/static/imgs/ywc.png" class="orderImg"></image>
            <view>已完成</view>
          </view>
          <view class="orderminiBox">
            <!-- <image src="/static/imgs/dfk2.png" class="orderImg"></image> -->
            <!-- <view>待付款</view> -->
          </view>
        </view>
      </view>

      <!-- //常用功能 -->
      <view class="orderBox">
        <view style="display: flex; justify-content: left; flex-wrap: wrap">
          <view class="orderminiBox" @click="shdz(1)">
            <image src="/static/imgs/yhq.png" class="orderImg"></image>
            <view>优惠券</view>
          </view>
          <view class="orderminiBox" @click="shdz(2)">
            <image src="/static/imgs/shdz.png" class="orderImg"></image>
            <view>收货地址</view>
          </view>
          <view class="orderminiBox" @click="shdz(3)">
            <image src="/static/imgs/hyk.png" class="orderImg"></image>
            <view>会员卡</view>
          </view>
          <view class="orderminiBox" @click="shdz(4)">
            <image src="/static/imgs/ye.png" class="orderImg"></image>
            <view>我的余额</view>
          </view>
          <view class="orderminiBox" @click="shdz(5)">
            <image src="/static/imgs/zc.png" class="orderImg"></image>
            <view>好友</view>
          </view>
          <view class="orderminiBox" @click="shdz(6)">
            <image src="/static/imgs/dhm.png" class="orderImg"></image>
            <view>兑换礼品</view>
          </view>
          <view class="orderminiBox" @click="shdz(7)">
            <image src="/static/imgs/lxkf.png" class="orderImg"></image>
            <view>联系客服</view>
          </view>
          <view class="orderminiBox" @click="shdz(8)">
            <image src="/static/imgs/sz.png" class="orderImg"></image>
            <view>设置</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    vip() {
      uni.navigateTo({
        url: "/pages/index/vip",
      });
    },
    //邀请好友
    yqhy() {
      // 跳转邀请好友
      uni.navigateTo({
        url: "/pages/index/invite",
      });
    },
    //订单详情
    orderInfo() {
      //跳转订单详情
      uni.navigateTo({
        url: "/pages/index/subsection",
      });
    },
    //收货地址
    shdz(i) {
      let urls = "";
      if (i == 2) {
        urls = "/pages/index/address";
      } else if (i == 3) {
        urls = "/pages/index/vip";
      } else if (i == 4) {
        urls = "/pages/index/ye";
      } else if (i == 5) {
        urls = "/pages/index/invite";
      } else if (i == 6) {
        urls = "/pages/index/code";
      }
      //跳转收货地址
      uni.navigateTo({
        url: urls,
      });
    },
  },
};
</script>

<style lang="less">
.orderminiBox {
  font-size: 25rpx;
  margin: 30rpx;
  margin-left: 45rpx;
  margin-right: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.orderImg {
  width: 70rpx;
  height: 70rpx;
}
.orderBox {
  background-color: white;
  margin: 20rpx;
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
  border-radius: 10rpx;
}
.yqhybtn {
  margin-top: 50rpx;
  margin-right: 50rpx;
  text-align: center;
  line-height: 60rpx;
  color: white;
  font-size: 25rpx;
  width: 200rpx;
  height: 60rpx;
  border: 1rpx solid white;
  border-radius: 50rpx;
}
.yqhy {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
  background-color: #ff373a;
  height: 150rpx;
  border-radius: 10rpx;
}
.yuer {
  width: 200rpx;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-left: 20rpx;
}
.tx {
  margin: 50rpx;
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  background-color: white;
  background-image: url(/static/imgs/my-1.png);
  background-size: cover;
  background-position: center;
}
.bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 35%;
  background: #222222;
  border-bottom-left-radius: 50% 15%;
  border-bottom-right-radius: 50% 15%;
}
page {
  background-color: #f1f1f1;
}
</style>
